<template>
  <div>
    <h1>1号训练室</h1>
    <button v-myloading="isLoading" class="btn">登录</button><br><br>
    <div v-myloading="isLoading" class="box">
      <p>11</p>
      <p>22</p>
      <p>33</p>
    </div>

    <button @click="isLoading = true">开启loading</button>
    <button @click="isLoading = false">关闭loading</button>
  </div>
</template>

<script>
export default {
  directives: {
    myloading: {
      // 节点一插入到页面中， 需要根据 isLoading 的状态，
      // 决定是否加上 loading 类
      inserted(el, binding) {
        if (binding.value) {
          // 加上 loading 类
          el.classList.add('loading')
        } else {
          // 移除 loading 类
          el.classList.remove('loading')
        }
      },
      update(el, binding) {
        if (binding.value) {
          // 加上 loading 类
          el.classList.add('loading')
        } else {
          // 移除 loading 类
          el.classList.remove('loading')
        }
      }
    }
  },
  data() {
    return {
      isLoading: true
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  width: 100px;
  height: 40px;
}
.loading {
  position: relative;
  // 可选，禁用点击
  pointer-events: none;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #323232 url('~@/assets/common/loading.gif') no-repeat center;
    background-size: contain;
  }
}
</style>
